import { PageContainer } from '@ant-design/pro-layout';
import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';

import ProTable, { ProColumns } from "@ant-design/pro-table";
import {TableListItem} from '@/services/produceManager/TableEx.d'
import {Button, message, Switch } from "antd";
import { FooterToolbar } from "@ant-design/pro-layout";
import {queryRows} from '@/services/produceManager/TableExService'
import { PlusOutlined } from '@ant-design/icons';

import styles from './index.less';
// import TableExpandChildren from './TableExpandChildren';
export default () => {

  const columns:ProColumns<TableListItem>[] = [
    // const columns= [
    {
      title: "Name",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
      width: "12%"
    },
    {
      title: "Address",
      dataIndex: "address",
      width: "30%",
      key: "address"
    }
  ];
  const rowSelection = {
    onChange: (selectedRowKeys:any, selectedRows) => {
      setSelectedTestRows(selectedRows);
      console.log('--------------------start--------------------')
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
      console.log('--------------------end--------------------')
    },
    // onSelect: (record, selected, selectedRows) => {
    //   setSelectedTestRows(selectedRows);
    //   message.info(selectedTestRowsState?.length);
    //   console.log(record);
    //   // console.log('--------------------A--------------------')
    //   // console.log(selected);
    //   // console.log('------------------B----------------------')
    //   // console.log(record, selected, selectedRows);
    //   // console.log('------------------C----------------------')
  
    // },
    // onSelectAll: (selected, selectedRows, changeRows) => {
    //   console.log(selected, selectedRows, changeRows);
    // }
  };

  const [selectedTestRowsState, setSelectedTestRows] = useState<TableListItem[]>([]);
  function sleep(delay:number) {
    var start = (new Date()).getTime();
    while((new Date()).getTime() - start < delay) {
        continue;
    }
}
  
const handleRemove=(selectedRows:TableListItem[])=>{
  const hide=message.loading('正在下达');
  if (!selectedRows) return true;
  try{
    sleep(1000);
    hide();
    message.success('下达成功，即将刷新');
    return true;
  }catch(error){
    hide();
    message.error('下达失败，请重试');
    return false;
  }

}



  const [loading, setLoading] = useState<boolean>(true);
  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);
  return (
    <PageContainer content="这是一个新页面，从这里进行开发！" className={styles.main}>

      <ProTable columns={columns} 
      rowSelection={{...rowSelection,checkStrictly:false}}
      //  dataSource={data} 
      request={(params, sorter, filter) => queryRows({ ...params, sorter, filter })}
      toolBarRender={()=>[
        <Button type='default'>
           <PlusOutlined /> 预估交期
        </Button>
      ]}
      />
      {
        selectedTestRowsState?.length>0&&
        (
          <FooterToolbar
          extra={
            <div>
              已选择 <a style={{ fontWeight: 600 }}>{selectedTestRowsState?.length}</a> 项&nbsp;&nbsp;
              
            </div>
          }
        >
          <Button onClick={()=>{
            // message.info('aaaaaaaaaaaaaaaaaaaaaaaaaaaaa'+JSON.stringify(selectedTestRowsState));
             handleRemove(selectedTestRowsState);
            setSelectedTestRows([]);
          }}>
            下达
          </Button>
        </FooterToolbar>
        )
      }
      

      <div
        style={{
          paddingTop: 100,
          textAlign: 'center',
        }}
      >
        <Spin spinning={loading} size="large" />
      </div>
    </PageContainer>
  );
};
